<template>
	<!-- <view class="container">
		<view class="form-body">
			<view class="form-section input-section">
				<text class="label" style="width: 100px;">设备类型:</text>
				<input type="text" placeholder="设备报修" style="display: inline-block; flex-grow: 1;"></input>
			</view>
			<view class="form-section">
				<text class="label" style="width: 100px;">报修原因:</text>
				<textarea class="description" rows="5" cols="40" placeholder="请详细描述您要报修的原因..."></textarea>
			</view>
			<view class="form-section reminder-section">
				<view class="form-section1">
					<text class="label" style="width: 100px; ">提醒方式:</text>
				</view>
				<view class="reminder-options">
					<view class="reminder-option">
						<radio value="短信"></radio>
						<text>短信</text>
					</view>
					<view class="reminder-option">
						<radio value="消息"></radio>
						<text>消息</text>
					</view>
					<view class="reminder-option">
						<radio value="无唤醒"></radio>
						<text>无唤醒</text>
					</view>
				</view>
			</view>
			<view class="form-section">
				<text class="label" style="width: 100px;">附件(请上传附件):</text>
				<view class="attachment-preview">
					<image :src="attachmentUrl" mode="aspectFit"></image>
				</view>
				<button @tap="addAttachment">点击可预览图片</button>
			</view>
		</view>
		<view class="form-footer">
			<button @tap="submitForm">提交申请</button>
		</view>
	</view> -->
	<view class="app-center">
		<view class="app-item" v-for="(item, index) in appItems" :key="index">
			<view class="app-icon">
				<image :src="item.iconUrl" mode="aspectFill">
			</view>
			<view class="app-name">{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appItems: [{
						iconUrl: 'https://example.com/icon1.png',
						name: '审批管理'
					},
					{
						iconUrl: 'https://example.com/icon2.png',
						name: '报销申请'
					},

				]
			}
		}
	}
</script>

<style>
	/* 	.container {
		flex-direction: column;
		align-items: center;
	}

	.form-header {
		padding: 20px;
		font-size: 20px;
	}

	.form-body {
		width: 90%;
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.form-section {
		width: 200px;
		padding: 10px;
		box-sizing: border-box;



	}

	.label {
		font-weight: bold;
		text-align: right;
		width: 100px;
		margin-bottom: 10px;
		margin-left: auto;

	}

	.attachment-preview {
		display: flex;
		align-items: center;
	}

	.form-footer {
		width: 100%;
		text-align: center;
	}

	/* 新增样式 */
	/* .input-section {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.description {
		width: 200%;
		height: 20vh;
		padding: 10px;
		border: 1px solid #ccc; */

	/* 边框样式 */
	/* resize: vertical; */
	/* 允许垂直调整大小 */
	/* box-sizing: border-box; */
	/* 包含边框和内边距在内 */
	/* font-size: 16px;
		background-color: white; */
	/* 字体大小 */
	/* } */

	/* .reminder-options {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	.reminder-option {
		width: 33.3%;
		margin-bottom: 15px;
	}

	.reminder-section {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.form-section1 {
		margin-bottom: 50px;
	} */
	.app-center {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.app-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: calc(25% - 20rpx);
		/* 每个项目的宽度可以根据需要调整 */
		margin: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.app-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.app-icon image {
		width: 100%;
		height: 100%;
	}

	.app-name {
		font-size: 24rpx;
		color: #333;
	}
</style>